<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Js 触摸事件</title>
    <style>
        div#touchDiv {
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            border: 1px dotted black;
            text-align: center;
            color: white;
            font-size: 30px;
            /* margin: 0 auto;
            margin-top: 100px; */
            line-height: 200px;
            cursor: pointer;
        }

        #box {
            width: 500px;
            height: 300px;
            position: absolute;
            background-color: antiquewhite;
            border: 1px dotted black;
            text-align: center;
            color: white;
            font-size: 30px;
            /* margin: 0 auto;
            margin-top: 100px; */
            line-height: 200px;
            cursor: pointer;
        }

        #boxChild {
            width: 50px;
            height: 50px;
            background-color: aqua;
            border: 1px dotted black;
            position: absolute;
            left: 20px;
            top: 20px
        }
    </style>
</head>

<body>

    <h1>
        Js 触摸事件
    </h1>

    <div id="touchDiv">
        点击触摸
    </div>

    <div id="box">
        <div id="boxChild"></div>
    </div>

    <script>
        // 内联试Js
        // 通过DOM 树状 document.createElement 生成画布
        // 1 监听 DOMContentLoaded。指的是当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的加载完成。
        let canvas = document.addEventListener("DOMContentLoaded", function (e) {
            console.log("DOMContentLoaded");
            // 2 获取DOM 节点
            let touchDiv = document.getElementById("touchDiv");
            var touchStartX = 0;
            var touchStartY = 0;
            // 3 监听触摸事件
            touchDiv.addEventListener("touchstart", function (e) {
                console.log("touchstart");
                var touch = event.touches[0];
                touchStartX = touch.pageX;
                touchStartY = touch.pageY;
            })
            // 4 触摸离开事件
            touchDiv.addEventListener("touchend", function (e) {
                console.log("touchend");
            })
            // 5 移动事件
            touchDiv.addEventListener("touchmove", function (e) {
                console.log("touchmove--->坐标", e.touches[0].clientX, e.touches[0].clientY);
            })
            // 6 Js 触摸事件取消(正在触控事件但被其他事件打断了(如手机来电话了，pc切换页面等))
            touchDiv.addEventListener("touchcancel", function (e) {
                console.log("touchcancel-->");
            })

            // 7 Js 触摸事件取消(正在触控事件但被其他事件打断了(如手机来电话了，pc切换页面等))
            touchDiv.addEventListener("touch", function (e) {
                console.log("touchcancel-->");
            })

            let box = document.getElementById("box");
            let boxChild = document.getElementById("boxChild");
            boxChild.addEventListener("touchmove", function (e) {
                var touch = event.touches[0];
                //需要移动的x和y坐标
                var x = touch.pageX - touchStartX;
                var y = touch.pageY - touchStartY;
                //重置初始坐标为当前坐标
                touchStartX = touch.pageX;
                touchStartY = touch.pageY;
                //设置left和top属性实现div移动的效果
                boxChild.style.left = (parseFloat(box.style.left) + x) + 'px';
                boxChild.style.top = (parseFloat(box.style.top) + y) + 'px';
            })
        })




    </script>
</body>

</html>